<template>
  <view class="container">
    <!-- 头部 -->
    <!-- <view class="fixed-con">
      <statusBar></statusBar>
      <view class="go-back" @click="goBack">
        <image src="../../static/go-back.svg" @click="goBack"/>
        <view>消息中心</view>
        <image class="img-hide" src="../../static/brands-search.svg"/>
      </view>
    </view> -->

    <navigationBar title="消息中心" backBarBorder="2rpx solid #F1F1F1"/>

    <view class="like-collect">
      <view class="item" @click="goItem(1)">
        <view class="img">
          <image src="../../static/msg-like.svg"/>
          <view v-if="dataInfo.likes > 0">{{dataInfo.likes}}</view>
        </view>
        <text>赞和收藏</text>
      </view>
      <view class="item" @click="goItem(2)">
        <view class="img">
          <image src="../../static/msg-attention.svg"/>
          <view v-if="dataInfo.attentions > 0">{{dataInfo.attentions}}</view>
        </view>
        <text>新增关注</text>
      </view>
      <view class="item" @click="goItem(3)"> 
        <view class="img">
          <image src="../../static/msg-comment.svg"/>
          <view v-if="dataInfo.comment > 0">{{dataInfo.comment}}</view>
        </view>
        <text>评论和@</text>
      </view>
    </view>

    <view class="inform" @click="toMsg">
      <image src="../../static/msg-inform.svg"/>
      <view class="inform-right">
        <text>通知消息</text>
        <text>88品牌特卖节，正式开启啦，千款好物等你</text>
      </view>
    </view>
    <view class="inform" @click="toLogistics">
      <image src="../../static/msg-logistics.svg"/>
      <view class="inform-right">
        <text>交易物流</text>
        <text>亲,您有一笔订单发货啦，快来看看吧~</text>
      </view>
    </view>

    <view class="interval"></view>

    <view class="message">
      <view class="item">
        <image src="../../static/msg-stranger.svg"/>
        <view class="inform-right">
          <text>陌生人消息</text>
          <view>看见你视频下的留言，你可以添加我</view>
        </view>
        <view class="time">
          <text>4-12</text>
          <view>3</view>
        </view>
      </view>

      <view class="item">
        <image src="../../static/msg-stranger.svg"/>
        <view class="inform-right">
          <text>水煮鱼</text>
          <view>您的订单我们已经收到了，我们将尽给你满意的答复</view>
        </view>
        <view class="time">
          <text>10:23</text>
          <view>1</view>
        </view>
      </view>
      <view class="item">
        <image src="../../static/msg-stranger.svg"/>
        <view class="inform-right">
          <text>水煮鱼</text>
          <view>您的订单我们已经收到了，我们将尽给你满意的答复</view>
        </view>
        <view class="time">
          <text>10:23</text>
          <view>1</view>
        </view>
      </view>
      <view class="item">
        <image src="../../static/msg-stranger.svg"/>
        <view class="inform-right">
          <text>水煮鱼</text>
          <view>您的订单我们已经收到了，我们将尽给你满意的答复</view>
        </view>
        <view class="time">
          <text>10:23</text>
          <view>1</view>
        </view>
      </view>
      <view class="item">
        <image src="../../static/msg-stranger.svg"/>
        <view class="inform-right">
          <text>水煮鱼</text>
          <view>您的订单我们已经收到了，我们将尽给你满意的答复</view>
        </view>
        <view class="time">
          <text>10:23</text>
          <view>1</view>
        </view>
      </view>
      <view class="item">
        <image src="../../static/msg-stranger.svg"/>
        <view class="inform-right">
          <text>水煮鱼</text>
          <view>您的订单我们已经收到了，我们将尽给你满意的答复</view>
        </view>
        <view class="time">
          <text>10:23</text>
          <view>1</view>
        </view>
      </view>
      <view class="item">
        <image src="../../static/msg-stranger.svg"/>
        <view class="inform-right">
          <text>水煮鱼</text>
          <view>您的订单我们已经收到了，我们将尽给你满意的答复</view>
        </view>
        <view class="time">
          <text>10:23</text>
          <view>1</view>
        </view>
      </view>
      <view class="item">
        <image src="../../static/msg-stranger.svg"/>
        <view class="inform-right">
          <text>水煮鱼</text>
          <view>您的订单我们已经收到了，我们将尽给你满意的答复</view>
        </view>
        <view class="time">
          <text>10:23</text>
          <view>1</view>
        </view>
      </view>
      <view class="item">
        <image src="../../static/msg-stranger.svg"/>
        <view class="inform-right">
          <text>水煮鱼</text>
          <view>您的订单我们已经收到了，我们将尽给你满意的答复</view>
        </view>
        <view class="time">
          <text>10:23</text>
          <view>1</view>
        </view>
      </view>


    </view>

    <view class="safe-padding"></view>

  </view>
  
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { onShow } from '@dcloudio/uni-app';
  import {msgTotal} from '@/api/user';

  const dataInfo = reactive({
    likes:0,
    attentions:0,
    comment:0
  })

  onShow(() => {
    getMsgTotal()
  })

  const goBack = () => {
    uni.navigateBack({ delta: 1 })
  }

  const goItem = (item) => {
    switch (item) {
      case 1:
        uni.navigateTo({ url: '/pages/likeAndCollect/index' })
        break;
      case 2:
        uni.navigateTo({ url: '/pages/newAttention/index' })
        break;
      case 3:
        uni.navigateTo({ url: '/pages/commentAndAite/index' })
        break;
    }
  }

  const toMsg = () => {
    uni.navigateTo({ url: '/pages/notificationMsg/index' })
  }

  const toLogistics = () => {
    uni.navigateTo({ url: '/pages/logisticsNotice/index' })
  }

  const getMsgTotal = async () => {
    let res = await msgTotal()
    console.log('数量res',res);
    dataInfo.likes = res.likeAndCollCount
    dataInfo.attentions = res.interestCount
    dataInfo.comment = res.commentsAndAtCount
  }

</script>

<style lang="scss" scoped>
  .container{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: scroll;

    .fixed-con{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
      .go-back{
        width: 750rpx;
        height: 90rpx;
        padding:0 30rpx;
        box-sizing: border-box;
        background-color: white;
        border-bottom: 2rpx solid #F1F1F1;
        @include flex(row,space-between,center);
        image{
          width: 40rpx;
          height: 40rpx;
        }
        view{
          font-weight: 500;
          font-size: 32rpx;
          color: #333333;
        }
        .img-hide{
          opacity: 0;
        }
      }
    }

    .like-collect{
      width: 750rpx;
      /* height: 220rpx; */
      padding: 40rpx 74rpx;
      box-sizing: border-box;
      padding-top: calc(var(--status-bar-height) + 90rpx + 40rpx);
      @include flex(row,space-between);

      .item{
        width: 100rpx;
        @include flex(column,space-between,center);

        >text{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #333333;
          margin-top: 24rpx;
        }
        
        .img{
          width: 90rpx;
          height: 90rpx;
          position: relative;

          image{
            width: 90rpx;
            height: 90rpx;
          }

          view{
            width: 28rpx;
            height: 28rpx;
            border-radius: 14rpx;
            background-color: #FF2D52;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx;
            color: #FFFFFF;
            line-height: 28rpx;
            text-align: center;
            position: absolute;
            top: 0;
            right: -14rpx;
          }
        }
      }
    }

    .inform{
      width: 750rpx;
      height: 144rpx;
      padding:32rpx 30rpx;
      box-sizing: border-box;
      @include flex(row,flex-start);

      image{
        width: 80rpx;
        height: 80rpx;
        margin-right: 32rpx;
      }

      .inform-right{
        @include flex(column,flex-start,flex-start);
        text:nth-of-type(1){
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 30rpx;
          color: #222222;
          margin-bottom: 4rpx;
        }
        text:nth-of-type(2){
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #848484;
        }
      }
    }

    .interval{
      width: 750rpx;
      height: 20rpx;
      background-color: #F4F3F7;
    }

    .message{
      .item{
        width: 750rpx;
        height: 144rpx;
        padding:32rpx 30rpx;
        box-sizing: border-box;
        @include flex(row,flex-start);

        image{
          width: 80rpx;
          height: 80rpx;
          margin-right: 32rpx;
        }

        .inform-right{
          width: 450rpx;
          @include flex(column,flex-start,flex-start);
          text:nth-of-type(1){
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #222222;
            margin-bottom: 6rpx;
          }
          view{
            width: 100%;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #848484;
            @extend %text-overflow;
          }
        }

        .time{
          flex:1;
          @include flex(column,flex-start,flex-end);
          
          text{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #939395;
            margin-bottom: 8rpx;
          }
          view{
            width: 28rpx;
            height: 28rpx;
            border-radius: 14rpx;
            background-color: #FF2D52;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx;
            color: #FFFFFF;
            line-height: 28rpx;
            text-align: center;
          }
        }

      }
    }
  }
</style>